import React, {Component} from 'react';
import axios from "axios";
import BetterScroll from 'better-scroll'
class App extends Component {
    state={
        name:'哈哈哈',
        list:[],
    }

    componentDidMount() {
        console.log('一Did Mount')
        //数据请求axios
        //订阅函数调用
        //定时器
        //基于创建完的dom进行初始化..........betterscroll

        axios.get(`test.json`).then(res => {
            console.log(res.data.data.films)
            this.setState({
                list: res.data.data.films
            })
        })
    }

    render() {
        console.log('render')
        return (
            <div>
                <div id='name'>{this.state.name}</div>
                <button onClick={()=>{
                    this.setState({
                        name:'冲冲冲'
                    })
                }}>click</button>

                <div id="wrapper" style={{
                    height:'100px',
                    background:'yellow',
                    overflow: 'hidden',
                }}>
                    <ul>
                        {
                            this.state.list.map(item=>
                            <li key={item.filmId}>{item.name}</li>
                            )
                        }
                    </ul>
                </div>
            </div>
        );
    }

    //已经不推荐使用
    UNSAFE_componentWillUpdate(nextProps, nextState, nextContext) {
        //不能修改属性和状态
        console.log('componentWillUpdate',document.getElementById('name'))
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        //可以修改DOM
        //更新后,想要获取dom节点
        console.log('componentDidUpdate',document.getElementById('name'))
        console.log(prevProps)
        console.log(prevState)
        console.log(snapshot)
        console.log(this.state.list)
        new BetterScroll("#wrapper")
    }

    //组件应该更新吗
    //性能优化函数
    shouldComponentUpdate(nextProps, nextState, nextContext) {
        console.log(nextProps)
        console.log(nextState)
        console.log(nextContext)
        // return true;//应该更新
        // return false;//应该不更新
        // if(nextState.list.length>0){
        //     return true
        // }

        if(JSON.stringify(this.state)!==JSON.stringify(nextState)){
            return true
        }

        return false
    }
}

export default App;
